<!DOCTYPE html>
<html>
  <head>
    <title>style_test.html</title>
    <script src="test_bootstrap.js"></script>
    <script type="text/javascript">
      goog.require('bot.dom');
      goog.require('bot.locators');
      goog.require('bot.userAgent');
      goog.require('goog.array');
      goog.require('goog.testing.jsunit');
    </script>

    <script type="text/javascript">
      function testStyleAttributeReturnsCssText() {
        var e = bot.locators.findElement({id: 'child'});
        assertEquals('visibility: inherit;', bot.dom.getAttribute(e, 'style'));
      }

      function testStyleAttributeReturnsWithTrailingSemicolon() {
        var e = bot.locators.findElement({id: 'parent'});
        assertEquals('visibility: visible;', bot.dom.getAttribute(e, 'style'));
      }

      function testInlineStyleReturnsEmptyStringForNonexistentProperty() {
        var e = bot.locators.findElement({id: 'child'});
        assertEquals('', bot.dom.getInlineStyle(e, 'gibberish'));
      }

      function testInlineStyleReturnsEmptyStringForUnspecifiedProperty() {
        var e = bot.locators.findElement({id: 'child'});
        assertEquals('', bot.dom.getInlineStyle(e, 'display'));
      }

      function testInlineStyleReturnsEmptyStringForCssSpecifiedProperty() {
        var e = bot.locators.findElement({id: 'child'});
        assertEquals('', bot.dom.getInlineStyle(e, 'height'));
      }

      function testInlineStyleReturnsInlineProperty() {
        var e = bot.locators.findElement({id: 'child'});
        assertEquals('inherit', bot.dom.getInlineStyle(e, 'visibility'));
      }

      function testEffectiveStyleReturnsInlineProperty() {
        var e = bot.locators.findElement({id: 'parent'});
        assertEquals('visible', bot.dom.getEffectiveStyle(e, 'visibility'));
      }

      function testEffectiveStyleReturnsCssSpecifiedProperty() {
        var e = bot.locators.findElement({id: 'child'});
        assertEquals('20px', bot.dom.getEffectiveStyle(e, 'height'));
      }

      function testEffectiveStyleReturnsInheritedProperty() {
        var e = bot.locators.findElement({id: 'child'});
        assertEquals('visible', bot.dom.getEffectiveStyle(e, 'visibility'));
      }

      function testEffectiveStyleDoesNotReturnUnquotedShortMsFilterAsFilter() {
        var e = bot.locators.findElement({id: 'msFilterUnquotedFilterShort'});
        assertEquals('', bot.dom.getInlineStyle(e, 'filter'));
      }

      function testEffectiveStyleDoesNotReturnUnquotedLongMsFilterAsFilter() {
        var e = bot.locators.findElement({id: 'msFilterUnquotedFilterLong'});
        assertEquals('', bot.dom.getInlineStyle(e, 'filter'));
      }

      function testEffectiveStyleReturnsQuotedShortMsFilterAsFilter() {
        var e = bot.locators.findElement({id: 'msFilterQuotedFilterShort'});
        if (goog.userAgent.IE && bot.userAgent.isEngineVersion(8)) {
          assertEquals('alpha(opacity=0)', bot.dom.getInlineStyle(e, 'filter'));
        } else {
          // -ms-filters make sense only on IE.
          assertEquals('', bot.dom.getInlineStyle(e, 'filter'));
        }
      }

      function testEffectiveStyleReturnsQuotedLongMsFilterAsFilter() {
        var e = bot.locators.findElement({id: 'msFilterQuotedFilterLong'});
        if (goog.userAgent.IE && bot.userAgent.isEngineVersion(8)) {
          assertEquals('progid:DXImageTransform.Microsoft.Alpha(Opacity=20)',
              bot.dom.getInlineStyle(e, 'filter'));
        } else {
          // -ms-filters make sense only on IE.
          assertEquals('', bot.dom.getInlineStyle(e, 'filter'));
        }
      }

      function testCanRetreiveValueFromStyleTag() {
        var green = goog.dom.$('green');
        var color = bot.dom.getEffectiveStyle(green, 'background-color');

        // Depending on the browser, we get different values back.
        // TODO(user): Make the return value of colors consistent.
        var expected = ['green', 'rgb(0, 128, 0)', '#008000'];
        assert(goog.array.contains(expected, color));
      }
    </script>

    <style type="text/css">
      #child {
        height: 20px
      }
      </style>
  </head>
  <body>
    <div id="msFilterUnquotedFilterShort" style="-ms-filter:alpha(opacity=0)">A div</div>
    <div id="msFilterUnquotedFilterLong" style="-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20)">A div</div>
    <div id="msFilterQuotedFilterShort" style="-ms-filter:'alpha(opacity=0)'">A div</div>
    <div id="msFilterQuotedFilterLong" style="-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)'">A div</div>

    <div id="parent" style="visibility: visible">A parent div
      <div id="child" style="visibility: inherit;display:;">A child div</div>
    </div>

    <div id="green" style="background-color:green; width:100px; height:50px">
    </div>
  </body>
</html>
